<template>
  <div id="SysUser">
      <div style="display: flex;justify-content: space-between">
        <div>
          <el-input style="width:200px;margin-right: 10px" prefix-icon="el-icon-search" placeholder="请输入车辆编号"></el-input>
          <el-button icon="el-icon-search" circle></el-button>
        </div>
        <div>
          <el-button type="success" icon="el-icon-plus" size="small" @click="handleEdit">添加</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="batchdelete">批量删除</el-button>
        </div>
      </div>
      <div class="bodercass">
        <el-table
            :data="user"
            stripe
            border
            style="width: 100%"
            v-loading="loading" border element-loading-text="拼命加载中">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="caruId"
              label="用户编号"
              width="320">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="用户名"
              width="320">
          </el-table-column>
          <el-table-column
              prop="phoneNumber"
              label="手机号">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="350">
            <template slot-scope="scope">
              <el-button size="small" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" round>修改</el-button>
              <el-button size="small" type="danger" icon="el-icon-delete" @click="deleteUser(scope.$index, scope.row)" round>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑页面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
          <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
            <el-form-item label="用户编号" prop="caruId" hidden="hidden">
              <el-input size="small" v-model="editForm.caruId" auto-complete="off" placeholder="请输入用户编号" hidden="hidden"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input size="small" v-model="editForm.userName" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input size="small" v-model="editForm.phoneNumber" auto-complete="off" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
          </div>
        </el-dialog>
      </div>
  </div>
</template>
<script>
  import {request} from "../../utils/api.js";
  export default {
    name: "SysUser",
    data(){
      return{
        user:[],
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title: '添加',
        editForm: {
          caruId: '',
          userName: '',
          phoneNumber: '',
          token: localStorage.getItem('logintoken')
        },
        // rules表单验证
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          phoneNumber: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
        },
      }
    },
    formInline: {
      page: 1,
      limit: 10,
      varLable: '',
      varName: '',
      token: localStorage.getItem('logintoken')
    },
    // 删除
    seletedata: {
      ids: '',
      token: localStorage.getItem('logintoken')
    },
    created() {
/*      axios.get("http://localhost:8081/logins").then(resp=>{
        console.log(resp)
        this.user=resp
      });*/
      request({
        url:"/logins"
      }).then(res =>{
        console.log(res)
        this.user = res;
      });
    },
    methods:{
      batchdelete(){
        request({
          url:"/rights",
          params:{
            roleId:1,
          }
        }).then(res =>{
          console.log(res)
        });
      },
      handleEdit: function(index, row) {
        this.editFormVisible = true
        if (row != undefined && row != 'undefined') {
          this.title = '修改'
          this.editForm.caruId = row.caruId
          this.editForm.userName = row.userName
          this.editForm.phoneNumber = row.phoneNumber
        } else {
          this.title = '添加'
          this.editForm.userName = ''
          this.editForm.phoneNumber = ''
        }
      },deleteUser(index, row) {
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
              deptDelete(row.deptId)
                  .then(res => {
                    if (res.success) {
                      this.$message({
                        type: 'success',
                        message: '公司已删除!'
                      })
                      this.getdata(this.formInline)
                    } else {
                      this.$message({
                        type: 'info',
                        message: res.msg
                      })
                    }
                  })
                  .catch(err => {
                    this.loading = false
                    this.$message.error('公司删除失败，请稍后再试！')
                  })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
      },
      submitForm(){

      },
      // 关闭编辑、增加弹出框
      closeDialog() {
        this.editFormVisible = false
      }
    }
  }
</script>

<style scoped>
  .bodercass{
    margin-top: 18px;
  }
</style>